<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>个人信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="doChange">{{ changeV ? "保存":"修改" }}</el-button>
            </div>
            <el-form label-position="right" label-width="80px" :model="infoForm">
                <el-form-item label="uid">
                    {{ store.state.user.info.uid }}
                </el-form-item>
                <el-form-item label="职位">
                    {{ store.state.user.info.group_name }}
                </el-form-item>
                <el-form-item label="在会状态">
                    {{ store.state.user.info.state_name }}
                </el-form-item>

                <el-form-item label="昵称">
                    <el-input v-if="changeV" v-model="infoForm.nickname"></el-input>
                    <span v-else>{{ store.state.user.info.name }}</span> 
                </el-form-item>

                <el-form-item label="QQ">
                    <el-input v-if="changeV" v-model="infoForm.qq"></el-input>
                    <span v-else>{{ store.state.user.info.qq }}</span> 
                </el-form-item>
                <el-form-item label="b站uid">
                    <el-input v-if="changeV" v-model="infoForm.bilibili_uid"></el-input>
                    <span v-else>{{ store.state.user.info.bilibili_uid }}</span> 

                </el-form-item>
                <el-form-item label="头像">

                    <el-upload class="avatar-uploader" action="#" :http-request="doUpload"
                        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" style="border: 1px dashed black;border-radius: 5px;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"  style="border: 1px dashed black;border-radius: 5px;"></i>
                    </el-upload>

                </el-form-item>
            </el-form>

        </el-card>

    </div>
</template>
<script> 
import {getBase64 , getImg} from "@/api/help_func/index";
import uploadApi from "@/api/upload";
import store from "@/store";
import userApi from "@/api/system/user";

export default {
    name: "own-info",
    data() {
        return {
            infoForm: {
                nickname:"",
                qq:"",
                bilibili_uid:""
            },
            imageUrl: store.state.user.avatar,
            changeV:false,
            store:store,
        }
    },
    created() {
        this.infoForm.nickname = store.state.user.info.name;
        this.infoForm.qq = store.state.user.info.qq;
        this.infoForm.bilibili_uid = store.state.user.info.bilibili_uid;
    },
    methods: {
        async doUpload(dom){
            let file = dom.file;
            let base64Str = await getBase64(file);
            let sdata = {
                file_name :file.name,
                file_type : file.type,
                base64_str:base64Str
            }
            let res = await uploadApi.uploadAvatar(sdata);
            if(res.code == 0){
                this.$message.success(res.msg);
            }
        },
        async doChange(){
            if(this.changeV){
                let sdata = {...this.infoForm};
                let res = await userApi.editOwnInfo(sdata);
                if(res.code == 0){
                    this.$message.success(res.msg);
                    store.dispatch("user/getInfo");
                }
            }
            this.changeV = !this.changeV;
        },
        async handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            store.dispatch("user/getInfo");
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}

</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}

.avatar-uploader .el-upload {
    border: 1px dashed black;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}</style>